<template>
  <view class="generate-button">
    <wd-button block :disabled="disabled" @tap="$emit('on-click-generate')">
      <view class="flex justify-center items-center">
        <text class="mr-2">生成图片</text>
        <view :class="disabled ? 'start-loading' : ''" class="flex justify-center items-center">
          <wd-img :src="StartIcon" width="38rpx" height="38rpx" />
        </view>
        <text class="ml-1">{{ props.points }}</text>
      </view>
    </wd-button>
  </view>
</template>
<script lang="ts" setup>
import StartIcon from "@/static/svg/start-red.svg";
const props = withDefaults(
  defineProps<{
    points?: number; // 积分
  }>(),
  { points: 1 },
);

const disabled = ref(false);
// const onClickGenerate = () => {
//   //   disabled.value = true;
// };
</script>
<script lang="ts">
// 取消小程序样式隔离
export default {
  options: { styleIsolation: "shared" },
};
</script>
<style lang="scss" scoped>
.generate-button {
  @apply relative w-full box-border;
  padding: 0 24rpx;
  :deep(.wd-button) {
    width: 100%;
    color: #c13432;
    background-color: #f3d6d6;
    border: 2rpx solid #c13432;
  }

  .start-loading {
    color: #c13432;
    animation: rotation-process 2.4s linear infinite;
  }

  @keyframes rotation-process {
    0% {
      transform: rotate(0);
    }

    50% {
      transform: rotate(180deg);
    }

    100% {
      transform: rotate(360deg);
    }
  }
}
</style>
